<template>
    <view class="bg-white min-h-screen">
        <!-- 导航栏 -->
        <view class="px-4 py-3 border-b border-slate-100">
            <view class="flex justify-between items-center">
                <button class="p-2" @tap="goBack">
                    <text class="iconfont icon-arrow-left text-slate-800"></text>
                </button>
                <text class="text-lg font-medium text-slate-800">目标详情</text>
                <button class="p-2" @tap="showOptions">
                    <text class="iconfont icon-more text-slate-800"></text>
                </button>
            </view>
        </view>

        <!-- 目标头部 -->
        <view class="px-5 pt-6 pb-4">
            <view class="flex items-start">
                <view class="w-12 h-12 rounded-full flex items-center justify-center mr-4"
                    :style="{ backgroundColor: getGoalTypeColor(goal.type) + '20' }">
                    <text class="iconfont text-xl" :class="goal.icon"
                        :style="{ color: getGoalTypeColor(goal.type) }"></text>
                </view>
                <view class="flex-1">
                    <text class="text-xl font-bold text-slate-800">{{ goal.title }}</text>
                    <view class="flex items-center mt-1">
                        <text class="text-xs px-2 py-half rounded-full" :class="getGoalTypeClass(goal.type)">
                            {{ getGoalTypeName(goal.type) }}
                        </text>
                        <view class="w-1 h-1 rounded-full bg-slate-300 mx-2"></view>
                        <text class="text-xs text-slate-500">截止: {{ goal.deadline }}</text>
                    </view>
                </view>
                <button class="ml-2 px-3 py-1 rounded-lg bg-indigo-500 flex items-center" @tap="editGoal">
                    <text class="text-white text-xs">编辑</text>
                </button>
            </view>

            <view class="mt-4" v-if="goal.description">
                <text class="text-sm text-slate-600">{{ goal.description }}</text>
            </view>
        </view>

        <!-- 进度条 -->
        <view class="px-5 py-4 bg-slate-50">
            <view class="flex justify-between items-center mb-2">
                <text class="text-sm font-medium text-slate-700">目标进度</text>
                <text class="text-sm font-medium text-indigo-600">{{ goal.progress }}%</text>
            </view>
            <view class="h-2 bg-slate-200 rounded-full overflow-hidden">
                <view class="h-full rounded-full bg-indigo-500" :style="{ width: `${goal.progress}%` }"></view>
            </view>
        </view>

        <!-- 里程碑 -->
        <view class="px-5 py-6">
            <view class="flex justify-between items-center mb-4">
                <text class="text-base font-medium text-slate-800">里程碑</text>
                <button class="px-2 py-1 rounded-lg bg-slate-100 flex items-center" @tap="addMilestone">
                    <text class="iconfont icon-plus text-xs text-slate-600 mr-1"></text>
                    <text class="text-xs text-slate-600">添加</text>
                </button>
            </view>

            <view v-if="goal.milestones.length === 0"
                class="bg-slate-50 rounded-xl p-6 flex flex-col items-center justify-center">
                <view class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-3">
                    <text class="iconfont icon-flag text-slate-300 text-2xl"></text>
                </view>
                <text class="text-base font-medium text-slate-500 mb-1">暂无里程碑</text>
                <text class="text-xs text-slate-400 text-center">点击上方按钮添加里程碑</text>
            </view>

            <view v-else class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-3"
                v-for="(milestone, index) in goal.milestones" :key="index">
                <view class="flex items-center">
                    <checkbox :checked="milestone.completed" @change="toggleMilestone(index)" color="#667eea"
                        style="transform:scale(0.8)" />
                    <view class="ml-3 flex-1">
                        <text class="text-base font-medium text-slate-800"
                            :class="{ 'line-through opacity-50': milestone.completed }">
                            {{ milestone.title }}
                        </text>
                        <view class="flex items-center mt-1">
                            <text class="text-xs text-slate-500">{{ milestone.dueDate }}</text>
                            <view v-if="milestone.completed" class="flex items-center ml-2">
                                <text class="text-xs text-green-500">已完成</text>
                            </view>
                        </view>
                    </view>
                    <button class="p-2" @tap="editMilestone(index)">
                        <text class="iconfont icon-edit text-slate-400"></text>
                    </button>
                </view>
            </view>
        </view>

        <!-- 笔记 -->
        <view class="px-5 py-6 border-t border-slate-100">
            <view class="flex justify-between items-center mb-4">
                <text class="text-base font-medium text-slate-800">笔记</text>
                <button class="px-2 py-1 rounded-lg bg-slate-100 flex items-center" @tap="editNotes">
                    <text class="iconfont icon-edit text-xs text-slate-600 mr-1"></text>
                    <text class="text-xs text-slate-600">编辑</text>
                </button>
            </view>

            <view v-if="!goal.notes" class="bg-slate-50 rounded-xl p-6 flex flex-col items-center justify-center">
                <view class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-3">
                    <text class="iconfont icon-note text-slate-300 text-2xl"></text>
                </view>
                <text class="text-base font-medium text-slate-500 mb-1">暂无笔记</text>
                <text class="text-xs text-slate-400 text-center">点击上方按钮添加笔记</text>
            </view>

            <view v-else class="bg-white rounded-xl shadow-sm border border-slate-100 p-4">
                <text class="text-sm text-slate-600">{{ goal.notes }}</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

// 获取路由参数
const goalId = ref('');
onMounted(() => {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = currentPage.$page?.options;
    if (options && options.id) {
        goalId.value = options.id;
        loadGoalData(options.id);
    }
});

// 目标数据类型
interface Milestone {
    title: string;
    dueDate: string;
    completed: boolean;
}

interface Goal {
    id: string;
    title: string;
    description: string;
    icon: string;
    type: 'learning' | 'fitness' | 'career' | 'finance' | 'personal';
    deadline: string;
    progress: number;
    milestones: Milestone[];
    notes?: string;
}

// 目标数据
const goal = ref<Goal>({
    id: '',
    title: '学习前端开发',
    description: '掌握现代前端开发技术，包括HTML5、CSS3、JavaScript、Vue.js等，能够独立开发高质量的Web应用。',
    icon: 'icon-code',
    type: 'learning',
    deadline: '2023-12-31',
    progress: 45,
    milestones: [
        {
            title: '学习HTML5基础',
            dueDate: '2023-03-15',
            completed: true
        },
        {
            title: '学习CSS3和响应式设计',
            dueDate: '2023-05-20',
            completed: true
        },
        {
            title: '学习JavaScript基础和ES6+',
            dueDate: '2023-07-30',
            completed: false
        },
        {
            title: '学习Vue.js框架',
            dueDate: '2023-10-15',
            completed: false
        },
        {
            title: '完成个人项目作品集',
            dueDate: '2023-12-15',
            completed: false
        }
    ],
    notes: '前端开发是一个不断发展的领域，需要持续学习新技术。重点关注性能优化和用户体验设计。可以参加一些开源项目来提升实战经验。'
});

// 加载目标数据
const loadGoalData = (id: string) => {
    // 这里应该从数据库或API获取数据
    // 为了演示，我们使用模拟数据
    console.log(`加载目标数据: ${id}`);
    // 实际应用中这里会有API调用
};

// 获取目标类型颜色
const getGoalTypeColor = (type: string) => {
    switch (type) {
        case 'learning': return '#3b82f6';
        case 'fitness': return '#10b981';
        case 'career': return '#8b5cf6';
        case 'finance': return '#f59e0b';
        case 'personal': return '#ec4899';
        default: return '#6b7280';
    }
};

// 获取目标类型样式类
const getGoalTypeClass = (type: string) => {
    switch (type) {
        case 'learning': return 'bg-blue-100 text-blue-600';
        case 'fitness': return 'bg-green-100 text-green-600';
        case 'career': return 'bg-purple-100 text-purple-600';
        case 'finance': return 'bg-yellow-100 text-yellow-600';
        case 'personal': return 'bg-pink-100 text-pink-600';
        default: return 'bg-slate-100 text-slate-600';
    }
};

// 获取目标类型名称
const getGoalTypeName = (type: string) => {
    switch (type) {
        case 'learning': return '学习';
        case 'fitness': return '健身';
        case 'career': return '职业';
        case 'finance': return '财务';
        case 'personal': return '个人';
        default: return '其他';
    }
};

// 切换里程碑完成状态
const toggleMilestone = (index: number) => {
    goal.value.milestones[index].completed = !goal.value.milestones[index].completed;

    // 更新目标进度
    updateGoalProgress();

    // 显示提示
    uni.showToast({
        title: goal.value.milestones[index].completed ? '已完成里程碑' : '已取消完成',
        icon: 'none'
    });
};

// 更新目标进度
const updateGoalProgress = () => {
    const totalMilestones = goal.value.milestones.length;
    if (totalMilestones === 0) return;

    const completedMilestones = goal.value.milestones.filter(m => m.completed).length;
    goal.value.progress = Math.round((completedMilestones / totalMilestones) * 100);
};

// 添加里程碑
const addMilestone = () => {
    uni.navigateTo({
        url: `/subPages/goal/milestone?goalId=${goal.value.id}`
    });
};

// 编辑里程碑
const editMilestone = (index: number) => {
    uni.showActionSheet({
        itemList: ['编辑', '删除'],
        success: (res) => {
            if (res.tapIndex === 0) {
                // 编辑
                uni.navigateTo({
                    url: `/subPages/goal/milestone?goalId=${goal.value.id}&milestoneIndex=${index}`
                });
            } else if (res.tapIndex === 1) {
                // 删除
                uni.showModal({
                    title: '删除里程碑',
                    content: '确定要删除这个里程碑吗？',
                    success: (modalRes) => {
                        if (modalRes.confirm) {
                            goal.value.milestones.splice(index, 1);

                            // 更新目标进度
                            updateGoalProgress();
                        }
                    }
                });
            }
        }
    });
};

// 编辑目标
const editGoal = () => {
    uni.navigateTo({
        url: `/subPages/goal/add?id=${goal.value.id}`
    });
};

// 编辑笔记
const editNotes = () => {
    uni.showModal({
        title: '编辑目标笔记',
        editable: true,
        content: goal.value.notes || '',
        success: (res) => {
            if (res.confirm) {
                goal.value.notes = res.content;
            }
        }
    });
};

// 显示选项菜单
const showOptions = () => {
    uni.showActionSheet({
        itemList: ['编辑目标', '删除目标'],
        success: (res) => {
            if (res.tapIndex === 0) {
                // 编辑目标
                editGoal();
            } else if (res.tapIndex === 1) {
                // 删除目标
                uni.showModal({
                    title: '删除目标',
                    content: '确定要删除这个目标吗？所有相关数据将被永久删除。',
                    confirmColor: '#ef4444',
                    success: (res) => {
                        if (res.confirm) {
                            // 执行删除操作
                            uni.showToast({
                                title: '删除成功',
                                icon: 'success',
                                success: () => {
                                    setTimeout(() => {
                                        goBack();
                                    }, 1500);
                                }
                            });
                        }
                    }
                });
            }
        }
    });
};

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
</script>

<style>
/* 添加额外的图标 */
.icon-arrow-left:before {
    content: '\e628';
}

.icon-more:before {
    content: '\e639';
}

.icon-plus:before {
    content: '\e636';
}

.icon-edit:before {
    content: '\e63b';
}

.icon-flag:before {
    content: '\e643';
}

.icon-note:before {
    content: '\e644';
}

.icon-code:before {
    content: '\e642';
}
</style>